<template>
  <div>
    <!-- 能力排行 2018/3/7 11:20 zhangQ -->
    <header id="header">
      <span class="title">开始时间:</span>
      <DatePicker v-model="startTime" type="datetime" placeholder="" style="width: 170px"></DatePicker>
      <span class="title">结束时间:</span>
      <DatePicker v-model="endTime" type="datetime" placeholder="" style="width: 170px"></DatePicker>
      <span class="title">类型:</span>
      <Select v-model="modelType" style="width:170px">
        <Option v-for="item in arr" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <span class="title">排序方式:</span>
      <Select v-model="modelsort" style="width:170px">
        <Option v-for="item in arrSort" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <Button type="primary" icon="ios-search" class="Btn1" @click="search">搜索</Button>
    </header><!-- /header -->
    <Table border :columns="columns1" :data="tableData.rows" style="margin-top:50px"></Table>
  </div>
</template>
<script>
  import { getAbilityList } from '@api/backEnd/fleetControl'
  import moment from 'moment'

  export default {
    name: 'abilityList',
    data () {
      return {
        startTime: '',
        endTime: '',
        modelType: '',
        arr: [
          {
            value: 'driver',
            label: '司机能力排行'
          }, {
            value: 'fleet',
            label: '车队能力排行'
          }, {
            value: 'truck',
            label: '车辆能力排行'
          }
        ],
        modelsort: '',
        arrSort: [
          {
            value: 'containerNumber',
            label: '箱子运量'
          }
        ],
        columns1: [
          {
            title: '用户名',
            key: 'loginName'
          },
          {
            title: '成绩',
            key: 'containerNumber'
          }
        ],
        tableData: {
          pagination: {
            total: 0,
            pageNo: 1,
            pageSize: 10,
            parentId: 0
          },
          rows: []
        }
      }
    },
    computed: {},
    methods: {
      search () {
        this.startTime = moment(this.startTime).format('YYYY-MM-DD HH:mm:ss')
        this.endTime = moment(this.endTime).format('YYYY-MM-DD HH:mm:ss')
        getAbilityList({
          startTime: this.startTime,
          endTime: this.endTime,
          type: this.modelType,
          sortBy: this.modelsort
        }).then(res => {
          console.log(res.data)
          if (+res.data.isSuccess === 1) {
            this.tableData.rows = res.data.data
          } else {
            console.log(res.data.res)
          }
        })
      }
    },
    mounted () {
      this.search()
    },
    components: {}
  }
</script>
<style scoped>
  .title {
    margin-left: 10px;
  }

  .title:first-child {
    margin-left: -10px;
  }

  .Btn1 {
    margin-left: 20px;
  }
</style>
